<template>
	<div>
		<div class="w-screen text-center bg-blue-400 p-4 text-2xl">注 册</div>
		<div>
			<div class="text-center my-2">
				<van-image round width="5rem" height="5rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
			</div>

			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field
						v-model="user.name"
						name="name"
						label="名称"
						placeholder="名称"
						:rules="[{ required: true, message: '请填写用户名称' }]"
					/>
					<van-field
						v-model="user.phone"
						name="phone"
						label="电话号码"
						placeholder="电话号码"
						:rules="[{ required: true, message: '请填写电话号码' }]"
					/>
					<van-field
						v-model="user.password"
						type="password"
						name="密码"
						label="密码"
						placeholder="密码"
						:rules="[{ required: true, message: '请填写密码' }]"
					/>
				</van-cell-group>
				<div style="margin: 16px">
					<div class="my-1">
						<van-button round block type="primary" native-type="submit"> 提交 </van-button>
					</div>
					<div class="my-1"><van-button round block type="warning" @click="toLogin"> 返回登录 </van-button></div>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script setup>
import { reactive } from "vue";
import { register } from "@/api/user.js";
import { useRouter } from "vue-router";
import { showToast } from "vant";

const user = reactive({
	name: "",
	phone: "",
	password: "",
});

const router = useRouter();
const onSubmit = async () => {
	const res = await register(user);
	if (res) {
		showToast({
			message: "注册成功",
			type: "success",
			onClose: () => {
				router.push("/login");
			},
		});
	}
};
const toLogin = () => {
	router.push("/login");
};
</script>

<style scoped></style>
